<template>
    <div class="max-collect">
        <h1>收藏页面</h1>

        <ul>
            <li v-for="item in lis" :key="item.id">
                <div class="head">
                    <div class="head-left">
                        <div class="head-left-one">
                            <img :src="item.userHead" />
                        </div>
                        <div class="head-left-two">
                            {{ item.userName }}
                        </div>
                        <div class="head-left-three">Lv:{{ item.grade }}</div>
                    </div>
                    <div class="head-right">...</div>
                </div>
                <!-- <div class="img">
                    <img :src="item.img" />
                </div> -->
                <router-link class="img" tag="div" :to="`/dishesofdetail/${item.id}`">
                    <img :src="item.img" />
                </router-link>
                <div class="collect">
                    <div class="collect-left">
                        <ul>
                            <li v-for="u in item.collect" :key="u.key">
                                <img :src="u.userHead" />
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="text">
                    {{ item.text }}
                </div>
            </li>
        </ul>
        <div class="dianzi"></div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
    computed: {
        ...mapState(["lis"]),
    },
    methods: {
        ...mapMutations(["setlis"]),
    },
};
</script>

<style scoped>
.max-collect {
    width: 100%;
    /* height: 100vh; */
    min-height: 100vh;
    color: white;
    background-color: black;
}
.max-collect h1 {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    padding: 10px;
}
.images {
    width: 100%;
    height: 100%;
}
.max-collect .banners {
    width: 100%;
    height: 15vh;
}
img {
    width: 100%;
    height: 100%;
}
.max-collect {
    width: 100%;
    color: white;
    background-color: black;
}
.max-collect ul {
    width: 100%;
    border-top: 1px solid transparent;
    /* border: 1px solid red; */
}
.max-collect ul li {
    width: 100%;
}
.max-collect ul li .head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 0 8px;
    box-sizing: border-box;
    margin-top: 20px;
}
.max-collect ul li .head-left {
    display: flex;
    align-items: center;
}
.max-collect ul li .head-left .head-left-one {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}
.max-collect ul li .head-left .head-left-two {
    font-size: 15px;
    margin-right: 10px;
}
.max-collect ul li .head-left .head-left-three {
    font-size: 13px;
    font-weight: 700;
    color: orangered;
}
.max-collect ul li .collect {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    box-sizing: border-box;
}
.max-collect ul li .collect .collect-left ul {
    display: flex;
    position: relative;
}
.max-collect ul li .collect .collect-left ul li {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid white;
    background-color: black;
}
.max-collect ul li .collect .collect-left ul li:nth-child(2) {
    position: absolute;
    left: 22px;
    z-index: 3;
}
.max-collect ul li .collect .collect-left ul li:nth-child(3) {
    position: absolute;
    left: 48px;
    z-index: 4;
}
.max-collect ul li .collect .collect-left ul li:nth-child(4) {
    position: absolute;
    left: 75px;
    z-index: 5;
}
.max-collect ul li .collect .collect-right {
    display: flex;
    align-items: center;
}
.max-collect ul li .text {
    margin: 10px 0;
    padding: 0 8px;
    box-sizing: border-box;
    line-height: 24px;
}
.max-collect .dianzi {
    height: 6vh;
    width: 100%;
}
</style>
